<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Highcharts Example</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
			$('#container').highcharts({
				chart: {
					type: 'waterfall'
				},

				title: {
					text: 'Highcharts Waterfall'
				},

				xAxis: {
					type: 'category'
				},

				yAxis: {
					title: {
						text: 'USD'
					}
				},

				legend: {
					enabled: false
				},

				tooltip: {
					pointFormat: '<b>${point.y:,.2f}</b> USD'
				},

				series: [{
					upColor: Highcharts.getOptions().colors[2],
					color: Highcharts.getOptions().colors[3],
					data: [{
						name: 'Start',
						y: 120000
					}, {
						name: 'Product Revenue',
						y: 569000
					}, {
						name: 'Service Revenue',
						y: 231000
					}, {
						name: 'Positive Balance',
						isIntermediateSum: true,
						color: Highcharts.getOptions().colors[1]
					}, {
						name: 'Fixed Costs',
						y: -342000
					}, {
						name: 'Variable Costs',
						y: -233000
					}, {
						name: 'Balance',
						isSum: true,
						color: Highcharts.getOptions().colors[1]
					}],
					dataLabels: {
						enabled: true,
						formatter: function () {
							return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
						},
						style: {
							color: '#FFFFFF',
							fontWeight: 'bold',
							textShadow: '0px 0px 3px black'
						}
					},
					pointPadding: 0
				}]
			});
		});

	</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>

</body>
</html>
